import { View, Image, Text } from '@tarojs/components'
import { AtIcon, AtGrid } from 'taro-ui'
import { useEffect, useRef, useState } from 'react'
import Taro from '@tarojs/taro'
import avatarImg from '../../assets/image/avatar.png'
import './index.less'

let icons = [
  {
    icon: 'cart',
    text: '购物车'
  },
  {
    icon: 'order',
    text: '订单'
  },
  {
    icon: 'collect',
    text: '收藏'
  },
  {
    icon: 'photo',
    text: '我的相册'
  }
]

const followList = [
  {
    value: 11,
    text: '搭配'
  },
  {
    value: 150,
    text: '关注'
  },
  {
    value: 21,
    text: '粉丝'
  },
]

const oftenVisit = [
  {
    avatar: avatarImg,
    text: '用户1'
  },
  {
    avatar: avatarImg,
    text: '用户2'
  },
  {
    avatar: avatarImg,
    text: '用户3'
  },
]

function Account() {
  const [userInfo, setUserInfo] = useState({
    avatarUrl: '',
    nickName: '昵称'
  })
  const [hasUserInfo, setHasUserInfo] = useState(false)

  function handleClick() {
    Taro.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        setUserInfo(res.userInfo)
        setHasUserInfo(true)
      }
    })
  }

  return (
    <View className='account' onClick={() => handleClick()}>
      {/* 头像栏 */}
      <View className='at-row at-row__justify--start at-row__align--center photo-wrap my-row'>
        {
          hasUserInfo ?
            <Image src={userInfo.avatarUrl} className='photo'></Image>
            :
            <View className='photo at-row at-row__justify--center at-row__align--center'>
              <AtIcon value='user' size='40' color='#232323'></AtIcon>
            </View>
        }
        <Text>{userInfo.nickName}</Text>
      </View>
      {/* 关注栏 */}
      <View className='at-row at-row__align--center my-row'>
        {
          followList.map(({ text, value }, k) => {
            return <View key={k} className='at-col at-col-4 grid-follow flex-column'>
              <View className='follow-val'>{value}</View>
              <View className='text'>{text}</View>
            </View>
          })
        }
      </View>
      {/* 选项栏 */}
      <View className='at-row at-row--wrap at-row__align--center my-row  background-card'>
        {
          icons.map(({ icon, text }, k) => {
            return <View className='at-col at-col-3 grid-choice flex-column' key={k}>
              <View className='icon-row'>
                <AtIcon value={icon} size='28' color='#232323' prefixClass='icon'></AtIcon>
              </View>
              <Text className='text'>{text}</Text>
            </View>
          })
        }
      </View>
      {/* 经常访问 */}
      <View className='often-visit background-card'>
        <View className='title'>经常访问</View>
        <View className='at-row scroll-row'>
          {
            oftenVisit.map(({ avatar, text }, k) => {
              return <View key={k} className='item flex-column'>
                <View><Image src={avatar} className='avatar' /></View>
                <View className='nickname'>{text}</View>
              </View>
            })
          }
        </View>
      </View>
    </View>
  )
}

export default Account